<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="app.css">
	<title>我的个人网站</title>
	<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		.demo{ background: #25303b;padding: 2em 0; }
		.main-timeline{
			    width: 80%;
			    margin: 20px auto;
			    position: relative;
			}
			.main-timeline:before{
			    content: "";
			    width: 2px;
			    height: 100%;
			    background: rgba(255,255,255,0.2);
			    margin: 0 0 0 -1px;
			    position: absolute;
			    top: 0;
			    left: 50%;
			}
			.main-timeline .timeline{
			    width: 100%;
			    margin-bottom: 20px;
			    position: relative;
			}
			.main-timeline .timeline:after{
			    content: "";
			    display: block;
			    clear: both;
			}
			.main-timeline .timeline-content{
			    width: 40%;
			    float: left;
			    margin: 5px 0 0 0;
			    border-radius: 6px;
			}
			.main-timeline .date{
			    display: block;
			    width: 70px;
			    height: 70px;		    
			    background: #25303b;
			    padding: 5px 0;
			    margin: 0 0 0 -36px;
			    position: absolute;
			    top: 0;
			    left: 50%;
			    font-size: 12px;
			    font-weight: 900;		    		    
			    border: 2px solid rgba(255,255,255,0.2);
			    box-shadow: 0 0 0 7px #25303b;
			}
			.main-timeline .day1,
			.main-timeline .day2,
			.main-timeline .day3,
			.main-timeline .day4
		{
			 padding: 15px;
		    margin: 0;
		    font-size: 20px;
		    text-transform: uppercase;
		    letter-spacing: -1px;
		    border-radius: 6px 6px 0 0;
		    position: relative;
		}	
		.main-timeline .day1{
			color: red;
		}	
		.main-timeline .day2{
			color: yellow;
		}
		.main-timeline .day3{
			color: black;
		}
		.main-timeline .day4{
			color: blue;
		}
		.main-timeline .title{
		    padding: 15px;
		    margin: 0;
		    font-size: 20px;
		    color: #fff;
		    text-transform: uppercase;
		    letter-spacing: -1px;
		    border-radius: 6px 6px 0 0;
		    position: relative;
		}
		.main-timeline .title:after{
		    content: "";
		    width: 10px;
		    height: 10px;
		    position: absolute;
		    top: 20px;
		    right: -5px;
		    transform: rotate(-45deg);
		}
		.main-timeline .description{
		    padding: 15px;
		    margin: 0;
		    font-size: 14px;
		    color: #656565;
		    background: #fff;
		    border-radius: 0 0 6px 6px;
		}
		.main-timeline .timeline:nth-child(2n+2) .timeline-content{
		    float: right;
		}
		.main-timeline .timeline:nth-child(2n+2) .title:after{
		    left: -5px;
		}
		.main-timeline .timeline:nth-child(1) .title,
		.main-timeline .timeline:nth-child(1) .title:after{
		    background: #9f84c4;
		}
		.main-timeline .timeline:nth-child(2) .title,
		.main-timeline .timeline:nth-child(2) .title:after{
		    background: #02a2dd;
		}
		.main-timeline .timeline:nth-child(3) .title,
		.main-timeline .timeline:nth-child(3) .title:after{
		    background: #58b25e;
		}
		.main-timeline .timeline:nth-child(4) .title,
		.main-timeline .timeline:nth-child(4) .title:after{
		    background: #eab715;
		}

		
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>我的个人网站主页之电影介绍</h1>			
		</header>
		  <nav class=""><ul><li><a href="#funny">喜剧电影</a></li><li><a href="#love">爱情电影</a></li><li><a href="#xuanyi">悬疑电影</a></li><li><a href="#science">科幻电影</a></li><li><a href="#going">注册登录</a></li><li><a href="#aboutme">关于站长</a></li><li><a href="">收藏本站</a></li></ul></nav>
    <section id="imgA">
        <p class="clearfix"></p>
		     <div class="slider">
				    <div class="slider-img">
				      <ul class="slider-img-ul">
				        <li><img src="images/5.jpg"></li>
				        <li><img src="images/1.jpg"></li>
				        <li><img src="images/2.jpg"></li>
				        <li><img src="images/3.jpg"></li>
				        <li><img src="images/4.jpg"></li>
				        <li><img src="images/5.jpg"></li>
				        <li><img src="images/1.jpg"></li>
				      </ul>
				    </div>

				  </div>
			
			</div>
			<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
			<script type="text/javascript" src="./js/xSlider.js"></script>
	</section>	
	<hr/>
	  <section id="top">
      <div id="billboard" class="s">
		 <div class="billboard-hd">
		  <h1>精选电影专题
		    <span>
		       <a href="列表页.html" target="_blank"><span style="font-size:20px;">了解更多。。</span></a>
		     </span>
		  </h1>
		  </div>
		  
		  <div class="billboard-bd">
		       <table>
		       <tbody>
		       	<tr>       		   
		          <td class="order">1</td>
		           <td class="title">
		             <a href="详细页.html"  target="_blank" >第89届奥斯卡金像奖完整获奖名单</a>
		             </td>
		         	</tr>
		         <tr>
		          <td class="order">2</td>
		          <td class="title">
		             <a href="">2016年内地电影票房排行榜</a>
		           </td>
		        </tr>
		        <tr>		       		   
		          <td class="order">3</td>
		          <td class="title">
		             <a href="">豆瓣2016榜单</a>
		           </td>
		        </tr>
		          <tr>		       		   
		          <td class="order">4</td>
		          <td class="title">
		             <a href="">完美的世界</a>
		           </td>
		        </tr>
		          <tr>		       		   
		          <td class="order">5</td>
		          <td class="title">
		             <a href="">10部引发思考的口碑科幻片</a>
		           </td>
		        </tr>
		         <tr>		       		   
		          <td class="order">6</td>
		          <td class="title">
		             <a href="">历届奥斯卡最佳影片合集</a>
		           </td>
		        </tr>
		         <tr>		       		   
		          <td class="order">7</td>
		          <td class="title">
		             <a href="">第6届豆瓣电影鑫像奖</a>
		           </td>
		        </tr>
		         <tr>		       		   
		          <td class="order">8</td>
		          <td class="title">
		             <a href="">预告片鉴赏</a>
		           </td>
		        </tr>
		         <tr>		       		   
		          <td class="order">9</td>
		          <td class="title">
		             <a href="">导演策划专题</a>
		           </td>
		        </tr>
		         <tr>		       		   
		          <td class="order">10</td>
		          <td class="title">
		             <a href="">电影节专题</a>
		           </td>
		        </tr>
		      </tbody> 
		    </table>
		</div>
		
   	</section>

			     <div class="main-timeline">
	                        <div class="timeline">
	                            <div class="timeline-content">
	                                <span class="date">
	                                    <span class="day1">喜剧电影</span>	                                    
	                                </span>
	                                <section id="funny">
	                                <h2 class="title">代表人物和代表作品 中国香港 周星驰 《大话西游》 印度 阿米尔汗 《三傻大闹宝莱坞》  美国 克里斯哥伦布 《小鬼当家》</h2>
	                                <p class="description"> 《大话西游》由《月光宝盒》和《大圣娶亲》两部组成，讲述了一个跨越时空的爱情故事。《三傻大闹宝莱坞》是小说《五点人》改编而成的影片采用插叙的手法，讲述了三位主人公法罕、拉加与兰彻间的大学故事。《小鬼当家》由克里斯·哥伦布导演，童星麦考利·卡尔金主演的家庭喜剧。由1990年至2012年共分五部上映。
	                                </p>
	                                <p> <img class="xi" src ="./jpg/大话西游.jpg" align = "right"></p>
	                                <p> <img class="xi" src ="./jpg/三傻大闹宝莱坞.jpg" align ="right"></p>	                                
	                                </section>
	                            </div>
	                        </div>

	                        <div class="timeline">
	                            <div class="timeline-content">
	                                <span class="date">
	                                    <span class="day2">爱情电影</span>	                                    
	                                </span>
	                                <section id="love">
	                                <h2 class="title">代表人物和代表作品 日本 岩井俊二 《情书》 法国 吕克贝松 《这个杀手不太冷》 美国 罗伯莱纳 《怦然心动》</h2>
	                                <p class="description">《情书》改编自同名小说《情书》，讲述了一封原本出于哀思而寄往天国的情书，却大出意料收到同名同姓的回信，并且逐渐挖掘出一段深埋多年却始终沉静的纯真单恋的爱情故事。 《这个杀手不太冷》由让·雷诺、盖瑞·欧德曼及娜塔丽·波特曼主演，讲述了一名职业杀手与一个小女孩的故事。
	                                 《怦然心动》是由罗伯·莱纳执导根据文德琳·范·德拉安南的同名原著小说改编，描述了青春期中男孩女孩之间的有趣战争。</p>
	                                <p> <img class="ai" src ="./jpg/情书.jpg" align = "left"></p>	                                
	                                <p> <img class="ai" src ="./jpg/怦然心动.jpg" align = "left"></p>
	                                </section>
	                            </div>
	                        </div>

	                        <div class="timeline">
	                            <div class="timeline-content">
	                                <span class="date">
	                                    <span class="day3">悬疑电影</span>	                                   
	                                </span>
	                                <section id="xuanyi">
	                                <h2 class="title">主要人物和代表作品 美国 马丁斯科赛斯 《禁闭岛》   中国 忻钰坤  《心迷宫》   日本 中岛哲也 《告白》</h2>
	                                <p class="description">《禁闭岛》由莱昂纳多·迪卡普里奥主演。影片讲述了联邦侦探泰德·丹尼尔受命到一座岛上调查一个杀人机构，却因此遇到了重重危险和谜团的故事。 《心迷宫》讲述了中国某偏远村庄里，因为一具莫名出现的尸体而引发的一连串离奇怪事的故事。该片于2015年10月16日在中国上映。《告白》根据小说《告白》改编而成。讲述了某一天森口悠子发现其爱女被杀害在学校的游泳池中。尽管该起事件被断定为意外死亡，但森口却向学生们宣告犯人就在班中，并展开了自己的复仇。</p>
	                                <p> <img class="xu" src ="./jpg/禁闭岛.jpg" align = "right"></p>
	                                <p> <img class="xu" src ="./jpg/心迷宫.jpg" align = "right"></p>
	                                
	                                </section>
	                            </div>
	                        </div>

	                        <div class="timeline">
	                            <div class="timeline-content">
	                                <span class="date">
	                                    <span class="day4">科幻电影</span>	        
	                                </span>
	                                <section id="science">
	                                <h2 class="title">主要人物和代表作品 美国 詹姆斯卡梅隆 《阿凡达》 英国 阿方索卡隆 《人类之子》</h2>
	                                <p class="description">《阿凡达》该片人类穿上阿凡达的躯壳，飞到遥远的星球潘多拉开采资源。受伤后以轮椅代步的前海军杰克，自愿接受实验并以他的阿凡达来到潘多拉。然而，在结识了当地纳美族人公主涅提妮之后，杰克在一场人类与潘多拉军民的战争中陷入两难。《人类之子》改编自“推理小说第一夫人”P·D·詹姆斯的同名推理小说，讲述的是人类灭亡前的英雄救世之战的故事，2006年9月22日在英国上映。</p>
	                                <p> <img class="ke" src ="./jpg/阿凡达.jpg" align = "left"></p>
                                    <p> <img class="ke" src ="./jpg/人类之子.jpg" align = "left"></p>
                                    </section>                                       
	                            </div>
	                        </div>
	                                <section id="going">
	                                <p class="moredescription">鼠标左键单击下表格进行采集注册</p>
	                                   <a class="biaodan"  href="form.html" target="_blank">看电影人士信息采集注册表</a>
	                                   </section>
	                                <section id="aboutme">
	                                <p class="moredescription">想要更多的了解站长点以下链接</p>
	                                   <a class="genre"  href="个人简历.html" target="_blank">有关我的个人简历</a>	                                  
	                                   </section>						    
                </div>
	</div>
</body>
</html>